<template>
  <div>
    <div class="content">
      <div class="card1-title">商户信息</div>
      <div class="card" style="margin-top: .5rem">
        <div class="ipt">
          <div class="card-div">商户名称：</div>
          <input class="input" type="text" v-model="name" placeholder="请输入商户名称" />
        </div>
        <div class="ipt">
          <div class="card-div">手机号：</div>
          <input class="input" type="number"  v-model="phone" placeholder="请输入手机号" @blur="changPhone" />
        </div>

        <div class="ipt">
          <div class="card-div">城市：</div>
          <input class="input" type="text" v-model="store.city" placeholder="请输入城市名称" />
        </div>
        <div class="ipt">
          <div class="card-div">类型：</div>
          <select class="inputs"  name="cars" v-model="role">
            <option value="1">店长</option>
          </select>
        </div>
        <div class="ipt">
          <div class="card-div">店铺名称：</div>
          <input class="input" type="text" v-model="store.name" placeholder="请输入店铺名称" />
        </div>
        <div class="ipt">
          <div class="card-div">店铺地址：</div>
          <input class="input" type="text" v-model="store.address" placeholder="请输入店铺地址" />
        </div>
        <div class="ipt">
          <div class="card-div">备注(非必填)：</div>
          <textarea class="input" v-model="dec" name="" id="" cols="5" rows="5" placeholder="请输入备注"></textarea>
        </div>
        <!-- <div class="card-div1">用户余额剩余：{{ integral }}元</div> -->
      </div>
      <div class="sao" @click="sumbit">
        <van-loading v-if="loadings" size="24px">新增...</van-loading>
        <span v-else> 确认新增</span>
      </div>
    </div>
  </div>
</template>
  
<script>
import { manage } from "@/api/fulfil.js";
export default {
  name:'addstore',
  data() {
    return {
      name: '',
      dec: '',
      phone: '',
      loadings: false,
      role:'1',
      store: {
        city: '',
        name: '',
        address: '',
      }
    };
  },
  created() { },
  mounted() {

  },
  activated() {

  },
  methods: {
    //校验手机号
    changPhone(value) {
      let phone = value.target.value;
      let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(phone)) {
        this.$Toast("请输入正确格式的手机号");
      }
    },
    sumbit() {
      if (!this.name) {
        this.$Toast("商户名称不能为空");
      } else if (!this.phone) {
        this.$Toast("手机号不能为空");
      } else if (!this.name) {
        this.$Toast("商户名称不能为空");
      } else if (!this.store.city) {
        this.$Toast("城市名称不能为空");
      } else if (!this.store.name) {
        this.$Toast("店铺名称不能为空");
      } else if (!this.store.address) {
        this.$Toast("地址不能为空");
      } else {
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!reg.test(this.phone)) {
          this.$Toast("请输入正确格式的手机号");
        } else {
          this.loadings = true;
          manage({
            adminid: localStorage.getItem("agentids"),
            name: this.name,
            dec: this.dec,
            phone: this.phone,
            role: '1',
            store: this.store,
          })
            .then((res) => {
              if (res.data.code == 0) {
                this.$Toast("新增商户成功！");
                setTimeout(() => {
                  this.$router.go(-1);
                }, 2000);
              } else {
                this.$Toast(res.data.msg);
              }
              this.loadings = false;
            })
            .catch((error) => {
              this.loadings = false;
              console.log(error);
            });
        }
      }



    },
  },
};
</script>
  
<style scoped>
.content {
  padding-bottom: 30px;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  background: #e1f7fc;
}

.card {
  overflow: hidden;
  margin: 0.3rem auto 0;
  width: 84%;
  border-radius: 0.375rem;
}

.input {
  margin-left: 0.1rem;
  margin-top: 0.2875rem;
  width: 60%;
  background: white;
  border: none;
  padding: 0.1875rem 0.25rem;
  border-radius: 0.25rem;
  border-inline: 2px solid transparent;
}
.inputs {
  margin-left: 0.1rem;
  margin-top: 0.2875rem;
  width: 66%;
  background: white;
  border: none;
  padding: 0.1875rem 0.25rem;
  border-radius: 0.25rem;
  border-inline: 2px solid transparent;
}  
.card-div {
  text-align: right;
  margin-top: .3rem;
  line-height: 1rem;
  flex: 1;
  font-size: 0.32rem;
  font-weight: 600;
}

.card-div1 {
  margin: 0.2rem 0 0 2.6rem;
  font-size: 0.32rem;
  font-weight: 600;
}

.img1 {
  display: inline-block;
  width: 27px;
  height: 48px;
  vertical-align: middle;
}

.return {
  margin: 20px 0 0 30px;
  font-size: 40px;
}

.sao {
  margin: 2rem auto 0;
  width: 60%;
  text-align: center;
  height: 1rem;
  line-height: 1rem;
  font-size: 0.35rem;
  border-radius: 0.5rem;
  background-color: #ffbe4c;
  font-weight: 600;
}

.card1-title {
  margin: 0.5rem 0 0 .5rem;
  font-size: 0.4125rem;
  font-weight: 600;
  color: #000;
}

.ipt {
  display: flex;
}
</style>